<template>
	<section>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="名称">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="价格">
				<el-input v-model="form.price"></el-input>
			</el-form-item>
			<el-form-item label="会员价格">
				<el-input v-model="form.memberPrice"></el-input>
			</el-form-item>
			<el-form-item label="品牌">
				<el-input v-model="form.trademark"></el-input>
			</el-form-item>
			<el-form-item label="编号">
				<el-input v-model="form.serialNumber"></el-input>
			</el-form-item>
			<el-form-item label="客服电话">
				<el-input v-model="form.serviceTel"></el-input>
			</el-form-item>
			<el-form-item label="图片">
				<el-upload
						class="upload-demo"
						action=""
						:before-upload="beforeUpload"
						:on-change="getFile"
						:file-list="fileList"
						:auto-upload="false"
						accept="image/jpeg,image/gif,image/png,image/bmp">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
			</el-form-item>
			<el-form-item label="详情">
				<quill-editor
						v-model="form.detail"
						ref="myQuillEditor"
						@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
						@change="onEditorChange($event)">
				</quill-editor>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="editSubmit" v-if="goodsId">修改</el-button>
				<el-button type="primary" @click="addSubmit" v-else>保存</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>

	</section>
</template>

<script>
	let moment = require('moment')
	import {addGoods,getGoodsDetail,editGoods} from "@/api/goods/api";
	export default {
		data() {
			return {
				goodsId:'',
				editorOption:[],
				fileList:[],
				//新增界面数据
				form: {
          name: '',   // 商品名字
					detail:  '',  // 商品详情
					imgList: [],  // 图片列表
					price: '',  // 价格
					trademark:'', // 品牌
					serialNumber:'', // 编号
					memberPrice: '', // 会员价格
					serviceTel:'',  //客服电话
					createTime: moment().format('YYYY-MM-DD HH:mm:ss')
				},
			}
		},
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
		methods: {
			getBase64(file) {
				return new Promise(function(resolve, reject) {
					let reader = new FileReader();
					let imgResult = "";
					reader.readAsDataURL(file);
					reader.onload = function() {
						imgResult = reader.result;
					};
					reader.onerror = function(error) {
						reject(error);
					};
					reader.onloadend = function() {
						resolve(imgResult);
					};
				});
			},
			delFile (obj) {
				this.form.imgList.map((item, i) => {
					if (item.uid == item.uid) {
						this.form.imgList.splice(i, 1)
						i--
					}
				})
			},
			getFile(file,fileList) {
				this.getBase64(file.raw).then(res => {
					file.raw.src = res
					this.form.imgList.push(file)
				});
				// this.form.imgList = res
			},
			beforeUpload(file){
				this.fileList.push(file)
			},
			onSubmit() {
				console.log('submit!');
			},
      onEditorReady(editor) { // 准备编辑器
      },
      onEditorBlur(){}, // 失去焦点事件
      onEditorFocus(){}, // 获得焦点事件
      onEditorChange(){}, // 内容改变事件
      saveHtml(event){
        alert(this.content);
      },
			//新增
			addSubmit () {
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					if(!this.form.name){
						this.$message.error('请输入商品名字');
						return false
					}
					if(!this.form.price){
						this.$message.error('请输入价格');
						return false
					}
					if(!this.form.memberPrice){
						this.$message.error('请输入会员价格');
						return false
					}
					if(!this.form.imgList.length){
						this.$message.error('请上传图片');
						return false
					}
					if(!this.form.trademark){
						this.$message.error('请输入品牌');
						return false
					}
					if(!this.form.serialNumber){
						this.$message.error('请输入编号');
						return false
					}
					if(!this.form.serviceTel){
						this.$message.error('请输入客服电话');
						return false
					}
					let para = Object.assign({}, this.form);
					addGoods(para).then((res) => {
						if(res.code == 200){
							this.$router.push({path:'commodity'})
						}
					});

				});
			},
			editSubmit() {
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					if(!this.form.name){
						this.$message.error('请输入商品名字');
						return false
					}
					if(!this.form.price){
						this.$message.error('请输入价格');
						return false
					}
					if(!this.form.memberPrice){
						this.$message.error('请输入会员价格');
						return false
					}
					if(!this.form.imgList.length){
						this.$message.error('请上传图片');
						return false
					}
					if(!this.form.trademark){
						this.$message.error('请输入品牌');
						return false
					}
					if(!this.form.serialNumber){
						this.$message.error('请输入编号');
						return false
					}
					console.log(this.form)
					let para = Object.assign({}, this.form);
					editGoods(para).then((res) => {
						if(res.code == 200){
							this.$router.push({path:'commodity'})
						}
					});

				});
			},
			// 获取详情
			getGoodsDetail(id){
				let para = Object.assign({}, {id:id});
				getGoodsDetail(para).then((res) => {
					if(res.code == 200){
						this.form =res.data
						this.fileList = res.data.imgList
					}
				});
			}
		},

		mounted() {
			if(this.$route.query.id){
				this.goodsId = this.$route.query.id
				this.getGoodsDetail(this.$route.query.id)
			}
		}
	}

</script>

<style lang="less">
   .viewNews img{
      width: 100%;
		 height: auto;
    }
</style>
